<template>
  <main>
    <div  class="eval-wrapper">
      <div class="eval-all">
        <div class="p-num">
          {{getEvalNum}}
        </div>
        <div class="p-star">
           <span v-for="item in 5" class="rate-star"  :class="{fill: item<=getEvalNum }">
            <icon symbol="star"></icon>
          </span>
        </div>
      </div>
      <div class="eval-empty" v-if="getEval.list.length==0">
        没有用户评论
      </div>
      <div class="eval-list">
        <div class="item" v-for="item in getEval.list">
          <div class="p-header">
            <div>
              <div class="p-face">
                <img :src="item.uPic" alt="">
              </div>
              <div class="p-name">{{item.uName}}</div>
            </div>
            <div class="p-date">{{item.changeDate}}</div>
          </div>
          <div class="p-star">
            <span v-for="item in 5" class="rate-star"  :class="{fill: item<=getEvalNum }">
              <icon symbol="star"></icon>
            </span>
          </div>
          <div class="p-content" v-if="item.eContent!=''">{{item.eContent}}</div>
          <ul class="p-goods" v-for="item in item.orderGoods">
            <li>{{item.goName}}</li>
          </ul>
        </div>
      </div>
      <div v-if="getEval.pageNum>getEval.page">
        <div class="list-loading"v-if="loading" >
          <img src="../../assets/loading-min.gif" alt="">
        </div>
        <div class="list-loadmore" >
          <button class="loadmore-btn" @click="loadMore">
            加载更多消息
          </button>
        </div>
      </div>
      <div class="list-complete" v-if="getEval.pageNum!=0 && (getEval.pageNum<=getEval.page)">
        <img src="../../assets/min-logo.png" alt="">
      </div>
    </div>

  </main>
</template>

<script lang="babel">
  import {mapGetters} from 'vuex'
  import Icon from '@components/icon'

  const fetchEvalList = async (store, {shopId, page}) => {
    await store.dispatch('backend/shop/getEval', {id: shopId , page})
  }
  export default{
    components: {
      Icon
    },
    data() {
      return{
        loading:false
      }
    },
    computed: {
      ...mapGetters({
        getEval: 'backend/shop/getEval'
      }),
      getEvalNum() {
        let num = parseFloat(this.getEval.num);
        return (num/2).toFixed(1)
      }
    },
    methods: {
      loadMore() {
        let shopId = this.shopId = this.$route.params.shopId;
        let page = this.getEval.page + 1;
        if(page <= this.getEval.pageNum) {
          this.loading = true;
          fetchEvalList(this.$store, {shopId, page});
          this.loading = false;
        }
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  .eval-wrapper{
    padding: 0 30/75rem;
    width: 100%;
    .eval-empty{
      text-align: center;
      margin-top: 30/75rem;
      font-size: 36/75rem;
    }
    .eval-all{
      display: flex;
      line-height: 1;
      align-items: center;
      padding-bottom:30/75rem;
      .p-num{
        font-size: 150/75rem;
        font-weight: bold;
        color: #ffb230;
      }
      .p-star{
        flex: 1;
        padding-left: 38/75rem;
        span{
          display: inline-block;
          margin-right: 17/75rem;
          .Icon{
            width: 50/75rem;
            height: 50/75rem;
            fill: #dad7d7;
          }
          &.fill{
            .Icon{
              fill: #fcb51b;
            }
          }
        }
        &:after{
          content: '综合评分';
          display: block;
          margin-top: 26/75rem;
        }
      }
    }
    .eval-list{
      .item{
        border-bottom: 1px solid #e5e5e5;
        padding: 20/75rem 0;
        &:first-child{
          border-top: 1px solid #e5e5e5;
        }
        .p-header{
          height: 80/75rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .p-face{
            width: 80/75rem;
            height: 80/75rem;
            border-radius: 50%;
            vertical-align: middle;
            display: inline-block;
            margin-right: 26/75rem;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .p-name{
            display: inline-block;
            line-height: 80/75rem;
          }
          .p-date{
            color: #b2b2b2;
          }
        }
        .p-star{
          flex: 1;
          padding-left: 10/75rem;
          margin-top: 15/75rem;
          span{
            display: inline-block;
            margin-right: 17/75rem;
            .Icon{
              width: 30/75rem;
              height: 30/75rem;
              fill: #dad7d7;
            }
            &.fill{
              .Icon{
                fill: #fcb51b;
              }
            }
          }
        }
        .p-content{
          margin-top: 10/75rem;
          line-height: 1.5;
          font-size: 28/75rem;
          padding-left: 10/75rem;
        }
        .p-goods{
          padding-left: 10/75rem;
          margin-top: 15/75rem;
          li{
            font-size: 28/75rem;
            line-height: 1.5;
            color: #d5d5d5;
          }
        }
      }
    }
  }
</style>
